<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div ref="webrtcdiv" :style="{height:webrtcheight,width:width}" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div ref="audiodiv" class="grid-content" :style="{height:audioheight,width:width}" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div ref="videodiv" class="grid-content" :style="{height:videoheight,width:width}" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import { getZwmpPort } from '@/api/resource'
import { Message } from 'element-ui'
import resize from '@/mixins/resize'

export default {
  filters: {
  },
  mixins: [resize],
  props: {
    module: {
      type: Number,
      require: true,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      numberPerRow: 50,
      webrtcchart: null,
      audiochart: null,
      videochart: null,
      width: '100%',
      webrtcheight: '0px',
      audioheight: '0px',
      videoheight: '0px',
      timer: null,
      webrtcoption: {
        title: {
          type: String,
          require: true,
          text: 'WebRTC端口占用情况',
          left: 'center',
          show: true
        },
        tooltip: {
          position: 'top'
        },
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '30px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: [],
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 2,
          calculable: false,
          orient: 'horizontal',
          left: 'center',
          bottom: '10%',
          show: false
        },
        series: [{
          name: 'port',
          type: 'heatmap',
          data: [],
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      audiooption: {
        title: {
          type: String,
          require: true,
          text: 'SIP音频/28181端口占用情况',
          left: 'center',
          show: true
        },
        tooltip: {
          position: 'top'
        },
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '30px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: [],
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 2,
          calculable: false,
          orient: 'horizontal',
          left: 'center',
          bottom: '10%',
          show: false
        },
        series: [{
          name: 'port',
          type: 'heatmap',
          data: [],
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      videooption: {
        title: {
          type: String,
          require: true,
          text: 'SIP视频端口占用情况',
          left: 'center',
          show: true
        },
        tooltip: {
          position: 'top'
        },
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '30px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: [],
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 2,
          calculable: false,
          orient: 'horizontal',
          left: 'center',
          bottom: '10%',
          show: false
        },
        series: [{
          name: 'port',
          type: 'heatmap',
          data: [],
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
    }
  },
  mounted() {
    this.getZwmpData(this.module)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.webrtcchart = this.$echarts.init(this.$refs.webrtcdiv, 'macarons')
      this.audiochart = this.$echarts.init(this.$refs.audiodiv, 'macarons')
      this.videochart = this.$echarts.init(this.$refs.videodiv, 'macarons')
    },
    getZwmpData(module) {
      const _this = this
      getZwmpPort(module)
        .then((response) => {
          const ports = JSON.parse(response.data.result)

          const totalPort = ports.webrtcport[0].max - ports.webrtcport[0].min + 1
          const rowCount = Math.ceil(totalPort / _this.numberPerRow)

          // 生成X轴
          _this.webrtcoption.xAxis.data = []
          for (let i = 0; i < _this.numberPerRow; i++) {
            _this.webrtcoption.xAxis.data.push(i)
          }

          // 生成Y轴
          _this.webrtcoption.yAxis.data = []
          for (let i = 0; i < rowCount; i++) {
            const begin = ports.webrtcport[0].min + _this.numberPerRow * i
            const end = ports.webrtcport[0].min + _this.numberPerRow * i + _this.numberPerRow - 1
            const yText = begin + '-' + end
            _this.webrtcoption.yAxis.data.push(yText)
          }

          // 生成数据
          _this.webrtcoption.series[0].data = []
          for (let i = 0; i < totalPort; i++) {
            const row = Math.floor(i / _this.numberPerRow)
            const column = i - row * _this.numberPerRow
            const port = ports.webrtcport[0].min + row * _this.numberPerRow + column
            let found = false
            ports.webrtcport[0].ports.forEach(function(element) {
              if (element === port) { found = true }
            })
            if (found) {
              _this.webrtcoption.series[0].data.push([column, row, 1])
            } else {
              _this.webrtcoption.series[0].data.push([column, row, 0])
            }
          }
          _this.webrtcheight = (Math.ceil(_this.webrtcoption.series[0].data.length / _this.numberPerRow) * 40 + 60) + 'px'
          this.$refs.webrtcdiv.style.webrtcheight = _this.webrtcheight

          // ////////////////////// 音频SIP端口   ////////////////////
          const audio_totalPort = ports.audioport[0].max - ports.audioport[0].min + 2
          const audio_rowCount = Math.ceil(audio_totalPort / _this.numberPerRow)

          // 生成X轴
          _this.audiooption.xAxis.data = []
          for (let i = 0; i < _this.numberPerRow; i++) {
            _this.audiooption.xAxis.data.push(i)
          }

          // 生成Y轴
          _this.audiooption.yAxis.data = []
          for (let i = 0; i < audio_rowCount; i++) {
            const begin = ports.audioport[0].min + _this.numberPerRow * i
            const end = ports.audioport[0].min + _this.numberPerRow * i + _this.numberPerRow - 1
            const yText = begin + '-' + end
            _this.audiooption.yAxis.data.push(yText)
          }

          // 生成数据
          _this.audiooption.series[0].data = []
          for (let i = 0; i < audio_totalPort; i++) {
            const row = Math.floor(i / _this.numberPerRow)
            const column = i - row * _this.numberPerRow
            const port = ports.audioport[0].min + row * _this.numberPerRow + column
            let found = false
            ports.audioport[0].ports.forEach(function(element) {
              if (element === port) { found = true }
            })
            if (found) {
              _this.audiooption.series[0].data.push([column, row, 1])
            } else {
              _this.audiooption.series[0].data.push([column, row, 0])
            }
          }
          _this.audioheight = (Math.ceil(_this.audiooption.series[0].data.length / _this.numberPerRow) * 40 + 60) + 'px'
          this.$refs.audiodiv.style.audioheight = _this.audioheight

          // ////////////////////// 视频SIP端口   ////////////////////
          const video_totalPort = ports.videoport[0].max - ports.videoport[0].min + 2
          const video_rowCount = Math.ceil(video_totalPort / _this.numberPerRow)

          // 生成X轴
          _this.videooption.xAxis.data = []
          for (let i = 0; i < _this.numberPerRow; i++) {
            _this.videooption.xAxis.data.push(i)
          }

          // 生成Y轴
          _this.videooption.yAxis.data = []
          for (let i = 0; i < video_rowCount; i++) {
            const begin = ports.videoport[0].min + _this.numberPerRow * i
            const end = ports.videoport[0].min + _this.numberPerRow * i + _this.numberPerRow - 1
            const yText = begin + '-' + end
            _this.videooption.yAxis.data.push(yText)
          }

          // 生成数据
          _this.videooption.series[0].data = []
          for (let i = 0; i < video_totalPort; i++) {
            const row = Math.floor(i / _this.numberPerRow)
            const column = i - row * _this.numberPerRow
            const port = ports.videoport[0].min + row * _this.numberPerRow + column
            let found = false
            ports.videoport[0].ports.forEach(function(element) {
              if (element === port) { found = true }
            })
            if (found) {
              _this.videooption.series[0].data.push([column, row, 1])
            } else {
              _this.videooption.series[0].data.push([column, row, 0])
            }
          }
          _this.videoheight = (Math.ceil(_this.videooption.series[0].data.length / _this.numberPerRow) * 40 + 60) + 'px'

          _this.initChart()
          _this.webrtcchart.resize()
          _this.audiochart.resize()
          _this.webrtcchart.setOption(_this.webrtcoption)
          _this.audiochart.setOption(_this.audiooption)

          _this.timer = setInterval(() => {
            getZwmpPort(module)
              .then((response) => {
                const ports = JSON.parse(response.data.result)

                const totalPort = ports.webrtcport[0].max - ports.webrtcport[0].min + 1
                const rowCount = Math.ceil(totalPort / _this.numberPerRow)

                // 生成X轴
                _this.webrtcoption.xAxis.data = []
                for (let i = 0; i < _this.numberPerRow; i++) {
                  _this.webrtcoption.xAxis.data.push(i)
                }

                // 生成Y轴
                _this.webrtcoption.yAxis.data = []
                for (let i = 0; i < rowCount; i++) {
                  const begin = ports.webrtcport[0].min + _this.numberPerRow * i
                  const end = ports.webrtcport[0].min + _this.numberPerRow * i + _this.numberPerRow - 1
                  const yText = begin + '-' + end
                  _this.webrtcoption.yAxis.data.push(yText)
                }

                // 生成数据
                _this.webrtcoption.series[0].data = []
                for (let i = 0; i < totalPort; i++) {
                  const row = Math.floor(i / _this.numberPerRow)
                  const column = i - row * _this.numberPerRow
                  const port = ports.webrtcport[0].min + row * _this.numberPerRow + column
                  let found = false
                  ports.webrtcport[0].ports.forEach(function(element) {
                    if (element === port) { found = true }
                  })
                  if (found) {
                    _this.webrtcoption.series[0].data.push([column, row, 1])
                  } else {
                    _this.webrtcoption.series[0].data.push([column, row, 0])
                  }
                }
                _this.webrtcheight = (Math.ceil(_this.webrtcoption.series[0].data.length / _this.numberPerRow) * 40 + 60) + 'px'

                // ////////////////////// 音频SIP/28181端口   ////////////////////
                const audio_totalPort = ports.audioport[0].max - ports.audioport[0].min + 2
                const audio_rowCount = Math.ceil(audio_totalPort / _this.numberPerRow)

                // 生成X轴
                _this.audiooption.xAxis.data = []
                for (let i = 0; i < _this.numberPerRow; i++) {
                  _this.audiooption.xAxis.data.push(i)
                }

                // 生成Y轴
                _this.audiooption.yAxis.data = []
                for (let i = 0; i < audio_rowCount; i++) {
                  const begin = ports.audioport[0].min + _this.numberPerRow * i
                  const end = ports.audioport[0].min + _this.numberPerRow * i + _this.numberPerRow - 1
                  const yText = begin + '-' + end
                  _this.audiooption.yAxis.data.push(yText)
                }

                // 生成数据
                _this.audiooption.series[0].data = []
                for (let i = 0; i < audio_totalPort; i++) {
                  const row = Math.floor(i / _this.numberPerRow)
                  const column = i - row * _this.numberPerRow
                  const port = ports.audioport[0].min + row * _this.numberPerRow + column
                  let found = false
                  ports.audioport[0].ports.forEach(function(element) {
                    if (element === port) { found = true }
                  })
                  if (found) {
                    _this.audiooption.series[0].data.push([column, row, 1])
                  } else {
                    _this.audiooption.series[0].data.push([column, row, 0])
                  }
                }
                _this.audioheight = (Math.ceil(_this.audiooption.series[0].data.length / _this.numberPerRow) * 40 + 60) + 'px'

                // ////////////////////// 视频SIP端口   ////////////////////
                const video_totalPort = ports.videoport[0].max - ports.videoport[0].min + 2
                const video_rowCount = Math.ceil(video_totalPort / _this.numberPerRow)

                // 生成X轴
                _this.videooption.xAxis.data = []
                for (let i = 0; i < _this.numberPerRow; i++) {
                  _this.videooption.xAxis.data.push(i)
                }

                // 生成Y轴
                _this.videooption.yAxis.data = []
                for (let i = 0; i < video_rowCount; i++) {
                  const begin = ports.videoport[0].min + _this.numberPerRow * i
                  const end = ports.videoport[0].min + _this.numberPerRow * i + _this.numberPerRow - 1
                  const yText = begin + '-' + end
                  _this.videooption.yAxis.data.push(yText)
                }

                // 生成数据
                _this.videooption.series[0].data = []
                for (let i = 0; i < video_totalPort; i++) {
                  const row = Math.floor(i / _this.numberPerRow)
                  const column = i - row * _this.numberPerRow
                  const port = ports.videoport[0].min + row * _this.numberPerRow + column
                  let found = false
                  ports.videoport[0].ports.forEach(function(element) {
                    if (element === port) { found = true }
                  })
                  if (found) {
                    _this.videooption.series[0].data.push([column, row, 1])
                  } else {
                    _this.videooption.series[0].data.push([column, row, 0])
                  }
                }
                _this.videoheight = (Math.ceil(_this.videooption.series[0].data.length / _this.numberPerRow) * 40 + 60) + 'px'

                _this.webrtcchart.resize()
                _this.audiochart.resize()
                _this.videochart.resize()

                _this.webrtcchart.setOption(_this.webrtcoption)
                _this.audiochart.setOption(_this.audiooption)
                _this.videochart.setOption(_this.videooption)
              })
              .catch((error) => {
                Message.error(error)
              })
          }, 3 * 1000)

          // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
          _this.$once('hook:beforeDestroy', () => {
            console.log('清除定时器')
            clearInterval(_this.timer)
          })
        })
        .catch((error) => {
          Message.error(error)
        })
      // this.webrtcchart.setOption(_this.webrtcoption)
      // this.audiochart.setOption(_this.audiooption)
      // this.videochart.setOption(_this.videooption)
    }
  }
}
</script>

<style lang="scss" >
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
  .el-card__body {
    padding: 0px !important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.55);
    font-size: medium;
    font-weight: bold;
    margin-top: 14px;
    margin-left: 14px;
  }
  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .el-header,
  .el-footer {
    background-color: #a4a4e6;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    div {
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      margin: auto;
    }
  }

  .el-main {
    // background-color: #e9eef3;
    color: #333;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
    vertical-align: middle;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  @media only screen and (max-width: 1510px) {
    .mallki-text {
      display: none;
    }
  }
}
</style>
